<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <title>牛客网-操作结果</title>
</head>
<body class="bg-white">
<div class="nk-container">
    <!-- 头部 -->
    <header th:replace="~{/site/common/layout::header}"></header>

    <!-- 内容 -->
    <div class="main">
        <div class="container mt-5">
            <div class="jumbotron">
                <p class="lead" th:text="${message}" style="color: red">您的账号已经激活成功,可以正常使用了!</p>
                <hr class="my-4">
                <p>
                    系统会在 <span id="seconds" class="text-danger">8</span> 秒后自动跳转,
                    您也可以点此 <a id="target" th:href="@{${redirectUrl}}" class="text-primary">链接</a>, 手动跳转!
                </p>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <header th:replace="~{/site/common/layout::footer}"></header>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
    $(function () {
        setInterval(function () {
            var seconds = $("#seconds").text();
            $("#seconds").text(--seconds);
            if (seconds == 0) {
                location.href = $("#target").attr("href");
            }
        }, 1000);
    });
</script>
</body>
</html>
